<script setup lang="ts">
import Goods from "@/modal/Goods";
import IconFont from "@/components/IconFont/IconFont.vue";
import {IconColor, IconType} from "@/components/IconFont/type";
import {computed, reactive, watch} from "vue";
import Pop from "@/modal/Pop";
import {ActionName} from "@/components/type";

const pop = reactive(Pop.getInstance());
const goods = reactive(Goods.getInstance());
const isGoodsBonus = computed(() => goods.isBonus);
watch(isGoodsBonus, (value, oldValue) => {
  if (value) {
    goods.getBonus();
    pop.showType(ActionName.BONUS);
    pop.toggle();
  }
})
</script>

<template>
  <div class="goods container-fluid h-100">
    <div class="goods-title col-12">
      <icon-font
        :icon-type="IconType.GOODS"
        :color="IconColor.GOODS"
        :is-desc="true"
        font-size="xx-large">
        <template #description>货物</template>
      </icon-font>
    </div>
    <div class="goods-items col-12">
      <div v-for="index in goods.capacity">
        <template v-if="index % 5 != 0">
          <icon-font :icon-type="IconType.GOODS"
                     :color="index <= goods.currentQuantity ? IconColor.GOODS:IconColor.DARK"
                     font-size="x-large"
          ></icon-font>
        </template>
        <template v-else>
          <icon-font :icon-type="index % 10 == 0 && index <= goods.currentQuantity ? IconType.BONUS : IconType.STAR"
                     :color="index <= goods.currentQuantity ? IconColor.GOODS:IconColor.DARK"
                     :inside-color="index <= goods.currentQuantity ? IconColor.LIGHT:IconColor.DARK"
                     :inside-icon="true"
                     font-size="xxx-large"
                     inside-font-size="small"
          >
            <template #inside>{{ index % 10 == 0 ? index : undefined }}</template>
          </icon-font>
        </template>
      </div>
    </div>
  </div>
</template>

<style scoped>
.goods-title {
  display: flex;
  height: 30px;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: 1;
}

.goods-items {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: calc(100% - 30px);
}

.goods-items > div {
  width: 28px;
  height: 28px;
  margin-right: calc(100% / 14 - 30px);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  box-shadow: 0 0 6px burlywood;
  line-height: 29px;
  text-align: center;
}

.goods-items > div:nth-child(15n) {
  margin-right: 0;
}

.goods-items > div:nth-child(5n) {
  border: 0 solid #ffffff;
  box-shadow: 0 0 0 green;
}


/* 字体图标内部偏移 */
.goods-items > div > * {
  top: -3%;
  left: 4%;
}

.goods-items > div:nth-child(5n) > * {
  position: relative;
  top: -2px;
  left: 0;
  justify-content: center;
}

</style>